<template>
  <div>

    <div id="container"></div>
<div id="panel"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    if (!window.AMap) {
      // 第一次加载
      window.onLoad = () => {
        // 如果高德js加载完毕了 那么 全局变量中肯定会一个  AMap 对象
        this.init();
      };
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=0c8fd8131662eea063ebbbf6e609d819&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    } else {
      this.init();
    }
  },
  methods: {
    init() {
      var map = new AMap.Map("container");

      var marker = new AMap.Marker({
        position: new AMap.LngLat(116.39, 39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "北京",
        // 自定义图标
        // icon:
        //   "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2990258295,3888000098&fm=26&gp=0.jpg",
      });

      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);

      AMap.plugin(["AMap.ToolBar", "AMap.Driving"], function () {
        //异步加载插件 放大插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);

        // 驾车插件  起点  终点
        var driving = new AMap.Driving({
          map: map,
          panel: "panel",
        });
        // 根据起终点经纬度规划驾车导航路线
        driving.search(
          new AMap.LngLat(116.379028, 39.865042),
          new AMap.LngLat(116.427281, 39.903719),
          function (status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === "complete") {
              log.success("绘制驾车路线完成");
            } else {
              log.error("获取驾车数据失败：" + result);
            }
          }
        );
      });
    },
  },
};
</script>

<style>
#container {
  width: 100vw;
  height: 800px;
}
</style>